import React, { useEffect, useRef, useState } from "react";
import * as echarts from "echarts";
import china from "../../../mapJSON/china.json";
import geoCoordMap from "./lib/HotG_GeoSrc";
import Hot_src from "./lib/HotG_ProvSrc";
import { Radio } from 'antd';

echarts.registerMap('china', china);

//在min和max范围内随机取一个数
function randomNum(max, min) {
	const num = Math.random() * (max - min + 1) + min
	return num
}

function HotG(props) {
	const options = [
		{
			label: '地图',
			value: '地图'
		},
		{
			label: '柱状图',
			value: '柱状图'
		}
	];
	const [choice, setChoice] = useState('地图');
	const onChange = ({ target: { value } }) => {
		console.log('radio checked', value);
		setChoice(value);
	}
	var myChart;
	const title = props.title;
	var ppAmount;
	const kind = props.kind - 1;
	const style = props.style;
	const chartRef = useRef(null);
	var convertData = function (data) {
		var res = [];
		for (var i = 0; i < data.length; i++) {
			var geoCoord = geoCoordMap[data[i].name];
			if (geoCoord) {
				//为了让热力图看起来好看一些，这里随机生成了企业坐标
				for (var j = 0; j < data[i].value; j++) {
					res.push({
						name: data[i].name + j,
						value: [randomNum(geoCoord[0] + 0.3, geoCoord[0] - 0.3), randomNum(geoCoord[1] + 0.3, geoCoord[1] - 0.3), 5]
					});
				}
			}
		}
		return res;
	};

	const chartInit = () => {
		ppAmount = Hot_src[kind]
		//这一步操作是继承上一次使用过的dom，提高运行效率
		const renderedInstance = echarts.getInstanceByDom(chartRef.current);
		if (renderedInstance) {
			myChart = renderedInstance;
		} else {
			myChart = echarts.init(chartRef.current);
		}

		var LightOption = {
			color:  ["rgba(255, 106, 0, 1)","rgba(0, 98, 255, 1)"],
			title: {
				text: title,
				subtext: '',
				left: 'center',
				textStyle: {
					color: '#000000'
				}
			},
			tooltip: {
				trigger: 'item',
				triggerOn: 'mousemove|click',
				formatter: function (arg) {
					return (arg.name + '<br/>企业总数：' + (arg.value ? arg.value : 0))
				},
				textStyle: {
					color: "#50a3ba"
				}
			},
			backgroundColor: '#fff',
			visualMap: {
				left: 'right',
				min: 0,
				max: 100,
				inRange: {
					// prettier-ignore
					color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
				},
				text: ['High', 'Low'],
				calculable: true
			},
			legend: {
				orient: 'vertical',
				left: 'left',
				top: '20%',
				itemWidth: 38.5,
				itemHeight: 22,
				textStyle: {
					fontSize: 18
				}
			},
			geo: {
				map: 'china',
				emphasis: {
					show: false
				}
				,
				roam: true,
				itemStyle: {
					//areaColor: '#6C7B8B',
					borderColor: '#111',
					emphasis: {
						areaColor: '#ffffff',
						color: "#50a3ba",
						label: {
							show: true,
							trigger: 'item',
						}
					}
				}
			},
			animationDurationUpdate: 1000,
			series: [
				{
					data: convertData(ppAmount),
					coordinateSystem: 'geo',
					//geoIndex: 0,//将人数与第0个geo配置关联
					name: '热力图',
					type: 'heatmap',
					animationType: 'scale',
					animationEasing: 'elasticOut',
					animationDelay: function (idx) {
						return Math.random() * 2000;
					}
				},
				{
					data: ppAmount.sort(function (a, b) {
						return a.value - b.value;
					}),
					geoIndex: 0,//将人数与第0个geo配置关联
					roam: true,
					name: '分布图',
					type: 'map',
					id: '企业分布',
					universalTransition: true
				}
			]
		};

		var BarOption = {
			title: {
				text: title,
				subtext: '',
				left: 'center',
				textStyle: {
					color: '#000000'
				}
			},
			xAxis: {
				type: 'value'
			},
			yAxis: {
				type: 'category',
				axisLabel: {
					rotate: 30
				},
				data: ppAmount.map(function (item) {
					return item.name;
				})
			},
			tooltip: {
				trigger: 'item',
				formatter: function (arg) {
					return (arg.name + '<br/>企业总数：' + (arg.value ? arg.value : 0))
				},
			},
			animationDurationUpdate: 1000,
			series: {
				type: 'bar',
				id: '企业分布',
				data: ppAmount.map(function (item) {
					return item.value;
				}),
				universalTransition: true
			}
		}
		myChart.setOption((choice === '地图') ? LightOption : BarOption, true);
		//这一部分是采用页面大小适配
		window.addEventListener('resize', function () {
			myChart.resize();
		});
	}
	//useEffect部分的警告请忽略
	useEffect(() => {
		chartInit();
	}, [choice, kind]);


	return (
		<div>
			<Radio.Group
				options={options}
				onChange={onChange}
				value={choice}
				optionType="button"
				buttonStyle="solid"
			/>
			<div
				ref={chartRef}
				style={style} />
		</div>
	);
}

export default HotG;